<template>
    <!-- 登录卡片区域 -->
    <div class="login-form-container">
            <!-- 登录表单区域 -->
            <div class="login-form">

                <!-- 登录表单 -->
                <form class="form-container" @submit.prevent="handleLogin">
                    <!-- 账号 -->
                    <input v-model="formData.username" type="text" placeholder="请输入账号" class="form-input" style="margin-top: 18px;">
                    <!-- 密码 -->
                    <input v-model="formData.password" type="password" placeholder="请输入密码" class="form-input">
                    <!-- 登录按钮 -->
                    <button type="submit">登录</button>
                </form>

                <!-- 尾部提示信息 -->
                <span class="login-tip">账号密码有问题请联系管理员</span>

            </div>

            <!-- 页脚区域 -->
            <div class="login-footer"></div>

        </div>
</template>

<script setup>
import { reactive,defineEmits } from 'vue';
// 1. 定义 emit，声明此组件会触发一个名为 'login' 的事件
const emit = defineEmits(['login'])

// 2. 使用 reactive 创建一个响应式对象来存储表单数据
// 结合表单数据和输入框进行双向数据绑定
const formData = reactive({
    username: '',
    password: ''
});

// 3. 定义提交事件的处理函数
const handleLogin = () => {
    // 当表单提交时，通过 emit 触发 login 事件，并把整个 formData 对象作为参数传出去
    emit('login', formData);
};

</script>


<style scoped>
.login-form-container{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 28px;
    border-radius: 32px;
    margin-top: 32px;
    border: 0.8px solid var(--border-color-form);
    /* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); */
}

.form-container {
    width: 329.975px;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    margin-top: 0;
    margin-bottom: 10px;
}

input {
    width: 295.344px;
    height: 42.4px;
    padding: 0 12px;
    border-radius: 9.6px;
    border: 0.8px solid var(--border-color-input);
    font-size: 16px;
    font-family:
    anthropicSans, "anthropicSans Fallback", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    system-ui,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
    "Segoe UI Symbol",font-feature-settingsnormal;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    transition: border-color 0.1s ease, background-color 0.1s ease;
    color: var(--text-color-tip);
}

input:hover {
    border: 1px solid var(--border-color-input-hover);
}

input:focus {
    outline: none;
    /* 自定义聚焦颜色 */
    border: 2px solid var(--border-color-input-focus);
}

button {
    width: 295.344px;
    height: 42.4px;
    padding: 0 12px;
    border-radius: 9.6px;
    border: 0.8px solid var(--border-color-input);
    font-size: 16px;
    font-family:
    anthropicSans, "anthropicSans Fallback", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    system-ui,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
    "Segoe UI Symbol",font-feature-settingsnormal;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--bg-color-button);
    color: #ffffff;
    cursor: pointer;

}

button:hover {
    background-color: var(--bg-color-button-hover);
    transform: scale(1.02) translateY(-2px);
  /* 阴影也可以稍微调整得更柔和一些，以匹配细微的动作 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

button:active {
    background-color: var(--bg-color-button-hover);
    transform: scale(0.98);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}


.login-tip {
    font-size: 12px;
    color: var(--text-color-tip);
    font-weight: 430;
    line-height: 19.5px;
    text-align: center;
    align-content: center;
    display: block;
}

</style>